<template>
    <div class="login_box">
      <img class="loginbg" src="/static/img/loginbg.jpg">
      <div class="loginbtn">
        <div class="loginbtn_tit">登录 | 商城后台系统</div>
        <el-input v-model="name" placeholder="请输入内容"></el-input>
        <el-input v-model="pwd" placeholder="请输入密码"  show-password></el-input>
        <el-button type="primary" round @click="loginfn">登录</el-button>
        <div class="foot_itps" @click="openCenter" >忘记密码？</div>
      </div>
    </div>
</template>

<script>
    export default {
        name: "login",
      data(){
          return {
            name: '',
            pwd:'',
          }
       },
      methods: {
        loginfn() {
          let _this = this
          if (this.name=='') {
            this.$message('请输入用户名');
            return false
          }
          if (this.pwd=='') {
            this.$message('请输入密码');
            return false
          }
          $.ajax({
            url:this.apis+'/admin/Login/Login',
            data:{
              user_name:this.name,
              password:this.pwd,
            },
            type:'post',
            success:function (res) {
              if (res.code==1) {
                _this.$message({
                  message: '登录成功',
                  type: 'success'
                });
                localStorage.setItem('headimg',res.data.headimg)
                localStorage.setItem('username',_this.name)
                localStorage.setItem('token',res.data.token)
                setTimeout(function () {
                  _this.$router.push({path:'/home'})
                },1000)
              }else {
                _this.$message.error('账号或密码错误');
              }
            }
          })
        },
        openCenter() {
          this.$message({
            message: '请联系管理员',
            center: true
          });
        }
      },
    }
</script>

<style scoped lang="less">
  .login_box{
    width: 100%;
    .loginbg{
      width: 100%;
      height: 100%;
      position: absolute;
    }
    .loginbtn{
      width: 400px;
      height: 550px;
      position: absolute;
      top: 25%;
      right: 10%;
      padding: 50px;
      padding-top: 70px;
      box-sizing: border-box;
      background-color: #ffffff;
      border-radius: 10px;
      text-align: center;
      .loginbtn_tit{
        font-size: 22px;
        text-align: center;
        margin-bottom: 80px;
      }
      .el-input{
        margin-bottom: 50px;
      }
      .el-button{
        width: 170px;
        margin-top: 20px;
      }
      .foot_itps{
        margin-top: 20px;
        cursor: pointer;
        color: #c5c5c5;
      }
      .foot_itps:hover{
        color: #222222;
      }
    }
  }
</style>
